<template>
	<view class="tl-tabbar">
		<u-tabbar :value.sync="value" @change="tabChange" :fixed="true" :placeholder="false"
			:safeAreaInsetBottom="false" :border="false" activeColor="#faad2a" :zIndex="10076">
			<u-tabbar-item :text="item.text" :icon="item.icon" @click="tabClick(item)" v-for="(item) in tabbarList"
				:key="item.name"></u-tabbar-item>
		</u-tabbar>

		<u-popup :modeStyle="modeStyle" :show="showQuestionPop" @close="showQuestionPop = false"
			@open="showQuestionPop = true" :closeable="true" :overlay="true" class="tl-tabbar-pop" :round="15">
			<view class="tl-tabbar-pop__content">
				<u-button :color="mainBtnColor" :customStyle="btnStyle" shape="circle" v-for="(item) in questionList"
					:key="item.value" @click="questionClick(item)">{{item.text}}
				</u-button>
			</view>
		</u-popup>
	</view>
</template>

<script>
	import routerConfig from "@/common/routerConfig.js"

	export default {
		data() {
			return {
				tabbarList: routerConfig.tabbarList,
				btnStyle: {
					fontSize: '33rpx'
				}
			}
		},
		computed: {},
		props: {
			value: {
				type: [String, Number],
				default: 0
			}
		},
		methods: {
			tabClick(tabItem) {

				this.$u.route({
					url: tabItem.pagePath,
					type: 'tab'
				})
			},
			tabChange(item) {
				console.log(item)
			},
			questionClick(questionItem) {
				this.$u.route({
					url: questionItem.path
				})
			}
		}
	}
</script>

<style lang="scss">
	.tl-tabbar {
		position: relative;

		&-pop {
			&__content {
				@include flex(column) height: 400rpx;
				padding: 90rpx 90rpx 50rpx;
				justify-content: space-around;
			}
		}
	}
</style>
